<template>
	<div style="height: 100%;">

		<div class="bgfff pad10 mb10 u-borderRadius8">
			<div class="displayFlexBet" style="margin-bottom: 10px;">
				<div class="color555">污染防治工艺</div>
			</div>
			<div>
				<el-form ref="form" label-width="80px">
					<el-form-item label="工艺描述">
						<el-input type="textarea" v-model="editData.techDesc" placeholder="工艺描述"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="updateTechDesc">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>

		<div class="bgfff pad10 u-borderRadius8">
			<div class="displayFlexBet" style="margin-bottom: 10px;">
				<div class="color555">污染防治设备</div>
				<el-button @click="addData" icon="el-icon-plus" type="primary" size="mini">新增设备</el-button>
			</div>
			<div v-if="dataList && dataList[0] && dataList[0].length > 0" v-infinite-scroll="load">
				<div v-for="(secondData,index3) in dataList" :key="index3">
					<div v-for="(item,index) in secondData" :key="index"
						style="margin-bottom: 10px;padding-bottom: 10px;border-bottom: 1px solid#f5f5f5;">

						<div class="mb10 displayFlexBet">
							<div class="color333 font16">
								<span>{{item.defenceName}}</span>
								<span class="ml20" v-if="item.defenceNo">{{item.defenceNo}}</span>
							</div>
							<div class="displayFlex">
								<div style="background: #E9E8F4;color: #3A3EF4;padding: 5px 20px;" class="font13 mr10 point"
									@click="editThis(item)"> 编辑</div>
								<div style="background: #FFF0EB;color: #F36C6C;padding: 5px 20px;" class="font13 point"
									@click="deleteProductionEquipmentBase(item)"> 删除</div>
							</div>
						</div>

						<div class="font13 color555" style="display: flex;justify-content: space-between;">
							<div style="flex: 1;border-right: 1px solid#E7E7E7;max-height: 154px;overflow-y: auto;" class="mr10">
								<div class="pt10 pb10 color333">核心参数</div>
								<div v-if="item.parameterList && item.parameterList.length == 0" class="color555">暂无数据</div>
								<div v-for="(item,index) in item.parameterList" :key="index" class="pt10 pb10 pl10 mr10 mb10"
									style="background: #F9F9F9;">
									<span>{{item.parameterName}}</span>
									<span class="ml10">{{item.designValueStr}}{{item.unitCode}}</span>
								</div>
							</div>
							<div style="flex: 1;border-right: 1px solid#E7E7E7;max-height: 154px;overflow-y: auto;" class="mr10">
								<div class="pt10 pb10 color333">原辅材料</div>
								<div v-if="item.materialList && item.materialList.length == 0" class="color555">暂无数据</div>
								<div v-for="(item,index) in item.materialList" :key="index" class="pt10 pb10 pl10 mr10 mb10"
									style="background: #F9F9F9;">
									<span>{{item.materialName}}</span>
								</div>
							</div>
							<div style="flex: 1;border-right: 1px solid#E7E7E7;max-height: 154px;overflow-y: auto;" class="mr10">
								<div class="pt10 pb10 color333">副产（次生废物）</div>
								<div v-if="item.sideProductList && item.sideProductList.length == 0" class="color555">暂无数据</div>
								<div v-for="(item,index) in item.sideProductList" :key="index" class="pt10 pb10 pl10 mr10 mb10"
									style="background: #F9F9F9;">
									<span>{{item.wasteName}}</span>
									<span>({{item.wasteCode}})</span>
								</div>
							</div>
							<div style="flex: 1;max-height: 154px;overflow-y: auto;">
								<div class="pt10 pb10 color333">巡检项</div>
								<div v-if="item.inspectItemList && item.inspectItemList.length == 0" class="color555">暂无数据</div>
								<div v-for="(item,index) in item.inspectItemList" :key="index" class="pt10 pb10 pl10 mb10"
									style="background: #F9F9F9;">
									<span>{{item.inspectItemName}}</span>
									<!-- <span>({{item.wasteCode}})</span> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div v-else style="background: #fff;border-radius: 16px;">
				<el-empty description="暂无内容"></el-empty>
			</div>
		</div>

		<waterDefenceManage ref="waterDefenceManage" @success="getDataList(false)" @close="getDataList(false)"
			:outletId="outletId" />
	</div>
</template>

<script>
	import waterDefenceManage from '@/components/wasteWater/waterDefenceManage'
	let that
	import VueQr from 'vue-qr'
	export default {
		props: ['outletId', 'editData'],
		components: {
			VueQr,
			waterDefenceManage
		},
		data() {
			return {
				dataList: [],
				params: {
					ticketId: '',
				},
				visible1: false,
				visible2: false,
				visible3: false,
				activeName: 'one',
				form: {
					defenceNo: ''
				},
				parameter: {
					list: []
				},

				formRules: {
					defenceName: [{
						required: true,
						message: '防治设施设备名称',
						trigger: 'blur'
					}],
					defenceType: [{
						required: true,
						message: '防治设施类型',
						trigger: 'blur'
					}],
					defenceNo: [{
						required: true,
						message: '防治设施编号',
						trigger: 'blur'
					}],
					defenceModel: [{
						required: true,
						message: '防治设施型号',
						trigger: 'blur'
					}],
				},

				unitList: [],
				productList: [], //已添加的产品列表
				materialList: [], //原辅料列表
				materialChooseList: [],
				waterTechnologyList: [],
				inspectItemList: [], //巡检项
				pageIndex: 0,
				totalPage: 0,
			}
		},

		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.ajax({
				url: '/codeType/listCodeValue',
				data: {
					typeCode: 'UNIT_TYPE'
				},
				success: function(data) {
					if (data.status == 1) that.unitList = data.data;
				}
			});
			that.ajax({
				url: '/waterTechnology/getWaterTechnologyList',
				data: {},
				success: function(data) {
					if (data.status == 1) that.waterTechnologyList = data.data;
					that.$forceUpdate()
				}
			});


			that.getDataList()
		},

		methods: {
			
			//删除生成设施
			deleteProductionEquipmentBase(item) {
				this.$confirm('是否确定删除此防治设施?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/waterOutletDefence/deleteLogicByDefenceId',
						data: {
							defenceId: item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.data) {
								that.$message.success("删除成功！！")
								that.getDataList()
							}
						},
					})
				})
			},
			
			updateTechDesc() {
				that.ajax({
					url: '/waterOutlet/updateTechDesc',
					data: JSON.stringify({
						techDesc: that.editData.techDesc,
						outletId: that.editData.id,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.$message.success("保存成功！")
						}
					}
				});
			},

			addData() {
				that.$refs.waterDefenceManage.addData()
			},

			//编辑
			editThis(item) {
				//item.isEdit = true
				that.$refs.waterDefenceManage.editThis(item)
			},

			load() {
				if (that.totalPage >= that.pageIndex) return false
				that.pageIndex += 1
				that.getDataList()
			},

			getDataList(isShow = true) {
				that.ajax({
					url: '/waterOutletDefence/getWaterDefenceListByOutletId',
					data: {
						outletId: that.outletId,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.dataList[that.pageIndex] = result.data
							that.totalPage = 1
							that.$forceUpdate()
							//console.log(that.dataList)
						}
					},
				}, isShow)
			},


		}
	}
</script>


<style scoped>
	.display_Flex_Bet {
		display: flex;
		justify-content: space-between;
	}
</style>